<template>
  <div>
    <div>
      <van-swipe :loop="false" :width="343" :height="260" :show-indicators="false">
        <van-swipe-item v-for="item in date" :key="item.id">
          <img :src="item.pic" alt="" />
          <p class="p1">{{ item.title }}</p>
          <p class="p2">{{ item.descript }}</p>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  props: {
    date: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.van-swipe {
  margin-top: 0.3rem;
}
.van-swipe-item {
  margin-left: 0.5rem;
  img {
    width: 100%;
    height: 195px;
    border-radius: 10px;
  }
  .p1 {
    font-size: 0.48rem;
    font-weight: 500;
  }
  .p2 {
    font-size: 0.48rem;
    color: grey;
    margin-top: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>